<template>
  <q-page class="page-map row">
    <q-scroll-area class="bg-green-1" style="width: 314px;">
      <div v-for="(warn, index) in warnShowList" :key="index" class="bg-white q-ma-sm  q-pa-sm rounded-borders shadow-4 column">
        <div class="col-8 row">
          <div class="col-7 q-ml-md text-weight-bolder" style="font-size: 15px;font-family:'SimHei'">{{ warn.title }}
          </div>
          <div class="col  icon-container">
            <q-icon :name="warn.type || 'mdi-leaf-maple'" class="text-primary" style="font-size: 70px;" :color="warn.warningLevel" />
          </div>
        </div>
        <div class="col row items-center">
          <q-icon name="mdi-google-maps" class="text-primary" size="sm" />
          <div class="col provider-name">
            {{ warn.platform }}
          </div>
          <div class="provider-name q-pr-xs">
            2024-09-04 08:00:00更新
          </div>
        </div>
      </div>
      <div v-if="warnShowList.length === 0" class="slide-wrap row items-center">
        <img src="img/map/speaker.png">
        <div id="weather" class="col">
          暂无天气预警信息
        </div>
      </div>
    </q-scroll-area>
    <q-select v-model="boat" :options="boats" dark borderless dense @input="createPlatform"/>
    <q-btn color="secondary" icon="mdi-map-marker-outline" label="轨迹查看" >
      <q-menu transition-show="rotate" transition-hide="rotate">
          <q-list style="min-width: 100px">
            <q-item clickable>
              <q-input
                  v-model="start"
                  prefix="开始时间:"
                  outlined
                  dense
                  class="q-my-sm"
                />
            </q-item>
            <q-item clickable>
              <q-input
                  v-model="end"
                  prefix="截止时间:"
                  outlined
                  dense
                  class="q-my-sm"
                />
            </q-item>
            <q-separator />
            <q-item clickable class="row justify-center q-gutter-x-sm">
              <q-btn color="primary" label="查询" @click="showShipPath" />
              <q-btn color="secondary" label="清除轨迹" @click="clearShipPath" />
            </q-item>
          </q-list>
        </q-menu>
    </q-btn>
    <weather class="weather-panel" v-if="boat!=='全部平台'" :platName="boat"/>
    <div class="col bg-grew" ref="map"></div>
  </q-page>
</template>

<script>
import * as maptalks from 'maptalks';
import { createMap } from 'boot/map';
import axios from 'axios';
import Weather from './weather.vue';

export default {
  name: 'IndexPage',
  components: {
    Weather
  },
  data() {
    return {
      ai: 0,
      i: 0,
      start: '2024-09-01',
      end: '2024-09-03',
      boat: '全部平台',
      boats: [],
      warnList: [
        { title: '海浪橙色警报', warningLevel: 'orange', type: 'mdi-waves', platform: '2号平台', from: '国家海洋预报台' },
        { title: '国家海洋预报台发布台风Ⅰ级警报（红色）...', type: 'mdi-weather-hurricane', warningLevel: 'red', platform: '12号平台' },
        { title: '国家海洋预报台发布台风Ⅳ级警报（蓝色）...', type: 'mdi-weather-hurricane', warningLevel: 'blue', platform: '12号平台' },
        { title: '国家海洋预报台发布海浪Ⅳ级警报（蓝色）...', type: 'mdi-weather-windy', warningLevel: 'yellow', platform: '12号平台' },
        { title: '国家海洋预报台发布海浪Ⅳ级警报（蓝色）...', warningLevel: 'blue', platform: '12号平台' },
        { title: '国家海洋预报台发布海浪Ⅳ级警报（蓝色）...', type: 'mdi-car-defrost-front', warningLevel: 'yellow', platform: '12号平台' },
        { title: '国家海洋预报台发布海浪Ⅳ级警报（蓝色）...', warningLevel: 'blue', platform: '12号平台' },
        { title: '国家海洋预报台发布海浪Ⅳ级警报（蓝色）...', warningLevel: 'blue', platform: '12号平台' },
        { title: '国家海洋预报台发布海浪Ⅳ级警报（蓝色）...', warningLevel: 'blue', platform: '12号平台' },
        { title: '国家海洋预报台发布海浪Ⅳ级警报（蓝色）...', warningLevel: 'blue', platform: '12号平台' },
        { title: '国家海洋预报台发布海浪Ⅳ级警报（蓝色）...', warningLevel: 'blue', platform: '12号平台' },
        { title: '国家海洋预报台发布海浪Ⅳ级警报（蓝色）...', warningLevel: 'blue', platform: '12号平台' },
        { title: '国家海洋预报台发布海浪Ⅳ级警报（蓝色）...', warningLevel: 'blue', platform: '12号平台' },
        { title: '国家海洋预报台发布海浪Ⅳ级警报（蓝色）...', warningLevel: 'blue', platform: '12号平台' },
      ],
      platformList: [{
        receive_date: '2024-09-04 10:42:27',
        mmsi: '413271530',
        course: '158.4',
        lon: '119.97055',
        id: '66d7c91c2d0eb014f729e309',
        lat: '38.0379',
        speed: '0.0',
        direction: '94.0',
        status: '0'
      },
      {
        receive_date: '2024-09-04 10:42:27',
        mmsi: '413271530',
        course: '158.4',
        lon: '117.72055',
        id: '66d7c91c2d0eb014f729e309',
        lat: '38.8379',
        speed: '0.0',
        direction: '144.0',
        status: '0'
      }, {
        receive_date: '2024-09-04 10:42:27',
        mmsi: '413271530',
        course: '158.4',
        lon: '117.91055',
        id: '66d7c91c2d0eb014f729e309',
        lat: '38.6879',
        speed: '0.0',
        direction: '44.0',
        status: '0'
      }, {
        receive_date: '2024-09-04 10:42:27',
        mmsi: '413271530',
        course: '158.4',
        lon: '118.07055',
        id: '66d7c91c2d0eb014f729e309',
        lat: '38.9379',
        speed: '0.0',
        direction: '20.0',
        status: '0'
      }, {
        receive_date: '2024-09-04 10:42:27',
        mmsi: '413271530',
        course: '158.4',
        lon: '119.77055',
        id: '66d7c91c2d0eb014f729e309',
        lat: '39.6379',
        speed: '0.0',
        direction: '60.0',
        status: '0'
      }, {
        receive_date: '2024-09-04 10:42:27',
        mmsi: '413271530',
        course: '158.4',
        lon: '119.77055',
        id: '66d7c91c2d0eb014f729e309',
        lat: '38.6379',
        speed: '0.0',
        direction: '244.0',
        status: '0'
      }
      ],
      shipPath: [{
        receive_date: '2024-07-03 09:08:53',
        mmsi: '413271530',
        course: '257.6',
        lon: '117.8214583',
        id: '6684a4a92d0eda8c0f019f5b',
        lat: '38.6306016',
        speed: '0.3',
        direction: '76.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 09:14:14',
        mmsi: '413271530',
        course: '309.0',
        lon: '117.82135',
        id: '66869bc12d0eda8c0f01ac2c',
        lat: '38.6306167',
        speed: '0.0',
        direction: '75.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 09:29:52',
        mmsi: '413271530',
        course: '76.2',
        lon: '117.8366167',
        id: '668bf5fd2d0eda8c0f01ce57',
        lat: '38.6333667',
        speed: '6.9',
        direction: '77.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 09:39:54',
        mmsi: '413271530',
        course: '76.0',
        lon: '117.8614',
        id: '6684db7b2d0eda8c0f01a109',
        lat: '38.637965',
        speed: '7.1',
        direction: '78.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 09:49:34',
        mmsi: '413271530',
        course: '76.6',
        lon: '117.8852833',
        id: '6684d70c2d0eda8c0f01a0e3',
        lat: '38.6424483',
        speed: '7.1',
        direction: '77.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 09:59:23',
        mmsi: '413271530',
        course: '76.3',
        lon: '117.9094633',
        id: '6684b0812d0eda8c0f019fb0',
        lat: '38.6470633',
        speed: '6.9',
        direction: '77.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 10:09:43',
        mmsi: '413271530',
        course: '76.1',
        lon: '117.9348667',
        id: '668641c82d0eda8c0f01aac6',
        lat: '38.6517333',
        speed: '7.2',
        direction: '77.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 10:19:33',
        mmsi: '413271530',
        course: '76.3',
        lon: '117.9586833',
        id: '6684ce3e2d0eda8c0f01a095',
        lat: '38.656415',
        speed: '5.5',
        direction: '77.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 10:27:34',
        mmsi: '413271530',
        course: '327.3',
        lon: '117.96158',
        id: '6684b71b2d0eda8c0f019fd5',
        lat: '38.657945',
        speed: '0.5',
        direction: '100.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 10:38:54',
        mmsi: '413271530',
        course: '189.2',
        lon: '117.9612833',
        id: '6684b9c32d0eda8c0f019ffb',
        lat: '38.6581666',
        speed: '0.5',
        direction: '106.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 10:49:33',
        mmsi: '413271530',
        course: '162.4',
        lon: '117.9613',
        id: '6684c5692d0eda8c0f01a06c',
        lat: '38.65815',
        speed: '0.0',
        direction: '106.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 10:59:34',
        mmsi: '413271530',
        course: '108.2',
        lon: '117.9678983',
        id: '6684be9a2d0eda8c0f01a012',
        lat: '38.6551833',
        speed: '7',
        direction: '105.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 11:09:04',
        mmsi: '413271530',
        course: '106.8',
        lon: '117.99129',
        id: '6684c0d42d0eda8c0f01a059',
        lat: '38.6492616',
        speed: '7.4',
        direction: '105.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 11:19:33',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 11,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 19,
          second: 38
        },
        mmsi: '413271530',
        course: '106.7',
        lon: '118.0175',
        id: '6684c34a2d0eda8c0f01a05f',
        lat: '38.6428883',
        speed: '7.3',
        direction: '105.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 11:28:43',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 11,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 29,
          second: 12
        },
        mmsi: '413271530',
        course: '107.2',
        lon: '118.0406833',
        id: '6684c5882d0eda8c0f01a06d',
        lat: '38.63737',
        speed: '7.4',
        direction: '105.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 11:39:54',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 11,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 39,
          second: 57
        },
        mmsi: '413271530',
        course: '106.9',
        lon: '118.069105',
        id: '6684c80d2d0eda8c0f01a07c',
        lat: '38.6305933',
        speed: '7.4',
        direction: '104.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 11:49:14',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 11,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 49,
          second: 17
        },
        mmsi: '413271530',
        course: '106.9',
        lon: '118.09305',
        id: '6684ca3e2d0eda8c0f01a085',
        lat: '38.6249166',
        speed: '7.6',
        direction: '105.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 11:59:44',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 11,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 59,
          second: 49
        },
        mmsi: '413271530',
        course: '105.5',
        lon: '118.1202066',
        id: '6684ccb52d0eda8c0f01a08d',
        lat: '38.6185566',
        speed: '7.7',
        direction: '104.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 12:08:24',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 12,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 8,
          second: 27
        },
        mmsi: '413271530',
        course: '106.8',
        lon: '118.1428983',
        id: '6684cebb2d0eda8c0f01a0a4',
        lat: '38.6133833',
        speed: '7.9',
        direction: '105.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 12:19:24',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 12,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 19,
          second: 28
        },
        mmsi: '413271530',
        course: '106.1',
        lon: '118.1719166',
        id: '6684d1502d0eda8c0f01a0b4',
        lat: '38.6068516',
        speed: '7.8',
        direction: '104.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 12:29:33',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 12,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 29,
          second: 37
        },
        mmsi: '413271530',
        course: '106.7',
        lon: '118.1993783',
        id: '6684d3b12d0eda8c0f01a0c8',
        lat: '38.6007416',
        speed: '7.9',
        direction: '104.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 12:38:44',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 12,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 38,
          second: 49
        },
        mmsi: '413271530',
        course: '108.0',
        lon: '118.2243666',
        id: '6684d5d92d0eda8c0f01a0d2',
        lat: '38.5945783',
        speed: '7.9',
        direction: '106.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 12:49:23',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 12,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 49,
          second: 27
        },
        mmsi: '413271530',
        course: '109.8',
        lon: '118.2534083',
        id: '6684d8572d0eda8c0f01a0ee',
        lat: '38.5868733',
        speed: '8.1',
        direction: '107.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 12:59:24',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 12,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 59,
          second: 29
        },
        mmsi: '413271530',
        course: '109.3',
        lon: '118.2810516',
        id: '6684dab12d0eda8c0f01a0fb',
        lat: '38.57983',
        speed: '8',
        direction: '107.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 13:09:34',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 13,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 9,
          second: 38
        },
        mmsi: '413271530',
        course: '104.7',
        lon: '118.30974',
        id: '6684dd122d0eda8c0f01a118',
        lat: '38.5728516',
        speed: '8.4',
        direction: '104.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 13:19:24',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 13,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 19,
          second: 28
        },
        mmsi: '413271530',
        course: '108.0',
        lon: '118.3383083',
        id: '6684df602d0eda8c0f01a129',
        lat: '38.5668983',
        speed: '8.4',
        direction: '109.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 13:29:33',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 13,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 29,
          second: 36
        },
        mmsi: '413271530',
        course: '108.9',
        lon: '118.3675466',
        id: '6684e1c02d0eda8c0f01a138',
        lat: '38.558965',
        speed: '8.8',
        direction: '109.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 13:39:34',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 13,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 39,
          second: 37
        },
        mmsi: '413271530',
        course: '108.1',
        lon: '118.3969316',
        id: '6684e4192d0eda8c0f01a14d',
        lat: '38.5513483',
        speed: '8.6',
        direction: '109.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 13:49:52',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 14,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 17,
          second: 49
        },
        mmsi: '413271530',
        course: '107.8',
        lon: '118.4275167',
        id: '6684ed0d2d0eda8c0f01a236',
        lat: '38.5436',
        speed: '8.8',
        direction: '109.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 13:59:44',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 13,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 59,
          second: 47
        },
        mmsi: '413271530',
        course: '107.7',
        lon: '118.4571666',
        id: '6684e8d32d0eda8c0f01a1fa',
        lat: '38.5359566',
        speed: '9',
        direction: '109.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 14:09:33',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 14,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 9,
          second: 37
        },
        mmsi: '413271530',
        course: '109.0',
        lon: '118.4867316',
        id: '6684eb212d0eda8c0f01a225',
        lat: '38.5283866',
        speed: '9',
        direction: '109.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 14:19:54',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 14,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 19,
          second: 58
        },
        mmsi: '413271530',
        course: '106.9',
        lon: '118.5176283',
        id: '6684ed8e2d0eda8c0f01a241',
        lat: '38.520535',
        speed: '8.7',
        direction: '109.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 14:27:44',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 14,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 27,
          second: 49
        },
        mmsi: '413271530',
        course: '107.5',
        lon: '118.5411633',
        id: '6684ef652d0eda8c0f01a256',
        lat: '38.51476',
        speed: '8.9',
        direction: '109.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 14:38:43',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 14,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 38,
          second: 49
        },
        mmsi: '413271530',
        course: '106.5',
        lon: '118.574385',
        id: '6684f1f92d0eda8c0f01a281',
        lat: '38.5066133',
        speed: '8.9',
        direction: '109.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 14:49:53',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 14,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 50,
          second: 41
        },
        mmsi: '413271530',
        course: '105.6',
        lon: '118.608575',
        id: '6684f4c12d0eda8c0f01a28d',
        lat: '38.4984216',
        speed: '9.2',
        direction: '109.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 14:59:23',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 14,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 59,
          second: 26
        },
        mmsi: '413271530',
        course: '106.6',
        lon: '118.6381066',
        id: '6684f6ce2d0eda8c0f01a29a',
        lat: '38.4914316',
        speed: '9.2',
        direction: '108.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 15:09:44',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 15,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 9,
          second: 47
        },
        mmsi: '413271530',
        course: '107.5',
        lon: '118.6705316',
        id: '6684f93b2d0eda8c0f01a2a9',
        lat: '38.4837833',
        speed: '9.3',
        direction: '109.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 15:19:13',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 15,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 19,
          second: 16
        },
        mmsi: '413271530',
        course: '106.5',
        lon: '118.7004283',
        id: '6684fb742d0eda8c0f01a2b8',
        lat: '38.4767916',
        speed: '9.3',
        direction: '108.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 15:29:44',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 15,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 29,
          second: 49
        },
        mmsi: '413271530',
        course: '105.5',
        lon: '118.73373',
        id: '6684fded2d0eda8c0f01a2c6',
        lat: '38.4690866',
        speed: '9.3',
        direction: '108.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 15:39:23',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 15,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 39,
          second: 27
        },
        mmsi: '413271530',
        course: '107.5',
        lon: '118.7642333',
        id: '6685002f2d0eda8c0f01a2db',
        lat: '38.4614483',
        speed: '9.4',
        direction: '110.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 15:49:44',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 15,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 49,
          second: 47
        },
        mmsi: '413271530',
        course: '109.5',
        lon: '118.797105',
        id: '6685029b2d0eda8c0f01a311',
        lat: '38.4529816',
        speed: '9.3',
        direction: '112.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 15:59:14',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 15,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 59,
          second: 49
        },
        mmsi: '413271530',
        course: '110.0',
        lon: '118.8270566',
        id: '668504f52d0eda8c0f01a321',
        lat: '38.444705',
        speed: '9.4',
        direction: '111.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 16:09:53',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 16,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 9,
          second: 56
        },
        mmsi: '413271530',
        course: '108.6',
        lon: '118.8607566',
        id: '668507542d0eda8c0f01a32c',
        lat: '38.4353116',
        speed: '9.4',
        direction: '111.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 16:18:24',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 16,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 18,
          second: 28
        },
        mmsi: '413271530',
        course: '109.6',
        lon: '118.8877933',
        id: '668509542d0eda8c0f01a337',
        lat: '38.4282316',
        speed: '9.6',
        direction: '112.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 16:29:04',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 16,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 29,
          second: 9
        },
        mmsi: '413271530',
        course: '106.1',
        lon: '118.921955',
        id: '66850bd52d0eda8c0f01a381',
        lat: '38.4192783',
        speed: '9.5',
        direction: '109.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 16:39:53',
        create_time: {
          dayOfWeek: 'FRIDAY',
          month: 'JULY',
          hour: 7,
          dayOfYear: 187,
          year: 2024,
          dayOfMonth: 5,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 44,
          second: 30
        },
        mmsi: '413271530',
        course: '108.3',
        lon: '118.957',
        id: '668733de2d0eda8c0f01b259',
        lat: '38.4101833',
        speed: '9.5',
        direction: '110.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 16:49:33',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 16,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 49,
          second: 39
        },
        mmsi: '413271530',
        course: '107.9',
        lon: '118.98813',
        id: '668510a32d0eda8c0f01a39b',
        lat: '38.402',
        speed: '9.6',
        direction: '109.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 16:59:53',
        create_time: {
          dayOfWeek: 'FRIDAY',
          month: 'JULY',
          hour: 7,
          dayOfYear: 187,
          year: 2024,
          dayOfMonth: 5,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 42,
          second: 41
        },
        mmsi: '413271530',
        course: '107.3',
        lon: '119.0213167',
        id: '668733712d0eda8c0f01b24f',
        lat: '38.3934333',
        speed: '9.6',
        direction: '108.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 17:09:53',
        create_time: {
          dayOfWeek: 'FRIDAY',
          month: 'JULY',
          hour: 7,
          dayOfYear: 187,
          year: 2024,
          dayOfMonth: 5,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 42,
          second: 36
        },
        mmsi: '413271530',
        course: '108.7',
        lon: '119.0530333',
        id: '6687336c2d0eda8c0f01b247',
        lat: '38.3855',
        speed: '9.4',
        direction: '108.0',
        status: '0'
      },
      {
        receive_date: '2024-07-03 17:19:03',
        create_time: {
          dayOfWeek: 'WEDNESDAY',
          month: 'JULY',
          hour: 17,
          dayOfYear: 185,
          year: 2024,
          dayOfMonth: 3,
          monthValue: 7,
          nano: 0,
          chronology: {
            calendarType: 'iso8601',
            id: 'ISO'
          },
          minute: 19,
          second: 7
        },
        mmsi: '413271530',
        course: '112.0',
        lon: '119.08141',
        id: '6685178b2d0eda8c0f01a3ca',
        lat: '38.3765816',
        speed: '9.5',
        direction: '114.0',
        status: '0'
      }],
      platformLayer: null,
      pathLayer: null,
    };
  },
  methods: {
    initDict() {
      this.$axios.get('/sys/dictItem/selectItemsByDefId?defId=weaPlatform').then((r) => {
        this.boats = r;
        this.boats.unshift('全部平台');
        console.log(r);
      });
    },

    getSymbol() {
      return [
        {
          lineColor: '#FF00FF',
          lineWidth: 2,
        },
        {
          markerType: 'ellipse',
          markerWidth: 8,
          markerHeight: 8,
          markerFill: '#fff',
          markerLineColor: '#f00',
          markerPlacement: 'vertex',
        },
      ];
    },
    createPlatform() {
      this.platformLayer.clear();
      this.platformShowList.forEach((platform) => {
        new maptalks.Marker([platform.lon, platform.lat], {
          symbol: {
            markerFile: '/img/map/yellow.png',
            markerWidth: 20,
            markerHeight: 20,
            markerDx: 0,
            markerDy: 0,
            markerOpacity: 1,
            markerRotation: -(platform.direction + 180),
          },
        })
          .addTo(this.platformLayer)
          .on('click', ({ target }) => {
            target.openInfoWindow();
          })
          .setInfoWindow({
            dx: 0,
            dy: 0,
            title: ' 2号钻井平台',
            content: `<B>平台名称: 2号钻井平台<BR>MMSI: ${platform.mmsi}<BR>速度: ${platform.speed}节<BR>船艏向: ${platform.direction}度<BR>航迹向: ${platform.course}度<BR>时间: ${platform.receive_date}<BR>纬度: ${platform.lon}N<BR>经度: ${platform.lat}E</B>`,
          });
      });
    },
    drawArrow(from, to) {
      const result = to;
      const polyLine = new maptalks.LineString(
        [
          [from.lon - 0, from.lat - 0],
          [to.lon - 0, to.lat - 0],
        ],
        {
          arrowStyle: 'classic', // we only have one arrow style now
          arrowPlacement: 'vertex-last', // vertex-first, vertex-last, vertex-firstlast, point
          symbol: {
            lineColor: '#FF00FF',
            lineWidth: 2,
          },
        }
      );
      polyLine
        .addTo(this.pathLayer)
        .on('click', ({ target }) => {
          target.openInfoWindow();
        })
        .setInfoWindow({
          dx: 0,
          dy: 0,
          title: '2号钻井平台',
          content: `<B>船名: 2号钻井平台<BR>MMSI: ${result.mmsi}<BR>速度: ${result.speed}节<BR>船艏向: ${result.direction}度<BR>航迹向: ${result.course}度<BR>时间: ${result.receive_date}<BR>纬度: ${result.lon}N<BR>经度: ${result.lat}E</B>`,
        });
    },
    clearShipPath() {
      this.pathLayer.clear();
    },
    showShipPath() {
      if (this.map) {
        this.pathLayer.clear();
        for (let i = 1; i < this.shipPath.length; i += 1) {
          this.drawArrow(this.shipPath[i - 1], this.shipPath[i]);
        }
      }
    },
  },
  async mounted() {
    this.map = await createMap(this.$refs.map, { main: false, draw: true });
    this.platformLayer = new maptalks.VectorLayer('platform').addTo(this.map);
    this.pathLayer = new maptalks.VectorLayer('path').addTo(this.map);
    this.createPlatform();
    this.initDict();
  },
  computed: {
    warnShowList() {
      if (this.boat !== '全部平台') {
        return this.warnList.filter((w) => w.warningLevel !== 'blue');
      }
      return this.warnList;
    },
    platformShowList() {
      if (this.boat !== '全部平台') {
        return [this.platformList[0]];
      }
      return this.platformList;
    }
  }
};
</script>

<style lang="stylus" scope>
.page-map
  .q-select
    position absolute
    right 200px
    top 30px
    width 164px
    height 40px
    z-index 1000
    background url('~assets/home/sbg.png')
    .q-field__native
      padding-left 60px
      font-size 16px
      color #4b94ed
  .weather-panel
    position absolute
    right 60px
    top 75px
    z-index 1000
  .q-btn
    position absolute
    right 20px
    top 30px
    width 164px
    height 40px
    z-index 1000

.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
};
.provider-name {
    font-size: 12px;
    line-height: 16px;
    font-weight: normal;
    color: var(--weather_map_sidebar_card_subtitle_color);
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
